<template>
  <div class="login-box">
    <Header />
    <div class="main" v-if="xiayibuShow">
      <div class="title">
        <h1>更换 Email</h1>
      </div>
      <div class="form-box">
        <el-form
          label-position="top"
          label-width="auto"
          :rules="rules"
          :model="formInfo"
          ref="formInfoRef"
        >
          <el-form-item label="账号 Email" prop="account">
            <el-input
              class="emails-box"
              type="email"
              :disabled="true"
              v-model="formInfo.account"
              :placeholder="email"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formInfo.password" placeholder="8-16位英数混合，允许特殊符号，区分大小写" />
          </el-form-item>
          <el-form-item label="输入验证码" prop="password">
            <daojishi ref="childRef1" @sendSuccess="sendSuccess"></daojishi>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button type="danger" round @click="submitForm(formInfoRef)">下一步</el-button>
        <el-button type="danger" round @click="cancelBack()">回个人设定</el-button>
      </div>
    </div>

    <div class="main" v-if="!xiayibuShow">
      <div class="title">
        <h1>更换 Email</h1>
      </div>
      <div class="form-box">
        <el-form
          label-position="top"
          label-width="auto"
          :rules="rules"
          :model="formInfo"
          ref="formInfoRef"
        >
          <el-form-item label="绑定 Email" prop="account">
            <el-input type="email" v-model="formInfo.account" placeholder="example@mail.com" />
          </el-form-item>
          <!-- <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formInfo.password" placeholder="8-16位英数混合，允许特殊符号，区分大小写" />
          </el-form-item>-->
          <el-form-item label="输入验证码" prop="password">
            <daojishi></daojishi>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button type="danger" round @click="submitForm(formInfoRef)">确认变更</el-button>
        <el-button type="danger" round @click="cancelBack()">回个人设定</el-button>
      </div>
    </div>

    <el-dialog v-model="dialogFormVisible" center>
      <div class="text-center top10">已送出验证 Email</div>
      <div class="fenshu-box top10">
        <img class="avg-header" src="@/assets/images/login_img1.svg" />
      </div>
      <div class="text-center top10">验证码已送出，请至邮箱收取验证码进行验证。</div>

      <div class="text-center-zhuce top20 fenshu-box">
        <div class="chongxing-login-btn" @click="hrefToHome">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { sendOldCode, getInfo, verifyCode } from "@/api/login";
import { reactive, ref, onMounted } from "vue";
import Header from "../Header.vue";
import { useRouter } from "vue-router";
import daojishi from "@/components/daojishi/daojishi.vue";
const email = ref("");
const router = useRouter();
const xiayibuShow = ref(true);
// 创建ref引用关联子组件
const childRef1 = ref(null);
const formInfoRef = ref(null);
const formInfo = reactive({
  account: "",
  password: ""
});

const dialogFormVisible = ref(false);

const rules = reactive({
  account: [{ required: true, message: "账号不可为空", trigger: "blur" }],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "change"
    },
    { min: 8, message: "8-16位英数混合，允许特殊符号，区分大小写", trigger: "blur" }
  ]
});
// 旧邮箱校验
const submitForm = async formEl => {
  console.log(childRef1.value.code)
  const res = await verifyCode({
    email: email.value,
    code: childRef1.value.code,
    type: "register"
  });
  if (res.code == 200) {
    xiayibuShow.value = false;
  }
};

const cancelBack = () => {
  router.push("/user/account");
};

const getInfoData = async () => {
  const res = await getInfo();
  if (res.code == 200) {
    email.value = res.data.email;
  }
};
const sendSuccess = async () => {
  const res = await sendOldCode({});
};
onMounted(() => {
  getInfoData();
});
</script>

<style lang="scss" scoped>
.fenshu-box {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.text-center {
  text-align: center;
}

.chongxing-login-btn {
  background-color: #fc8775;
  border-radius: 30px;
  color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 25px;
}

header {
  position: sticky;
  top: 0em;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  height: 4rem;
  z-index: 30;
  background: #ffffff;
  display: flex;
  align-items: center;
}

.main {
  width: 100%;
  margin: 0 auto;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 4rem;

  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    h1 {
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 4rem;
      letter-spacing: 0.05em;
      color: #1a202c;
      padding: 1rem;
      height: 4rem;
    }
  }

  .form-box {
    margin-top: 2rem;

    :deep(.el-form-item__label) {
      height: 4rem;
      line-height: 4rem;
      margin-bottom: 0;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: #1a202c;
    }

    :deep(.el-input) {
      display: flex;
      width: 100%;
      height: 3.5rem;
    }

    :deep(.emails-box .el-input__wrapper) {
      background-color: #f7fafc;
    }
  }

  .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    :deep(.el-button) {
      width: 100%;
      max-width: 16rem;
      padding: 0 1rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 50rem;
      margin: 0;
    }
  }
}
</style>